<!--个人中心昵称-->
<template>
  <div class="wrapper">
    <router-view></router-view>

    <!--背景图片-->
    <div class="Bg">
      <div class="bg"></div>
      <div class="bgtop">
        <a  href="">
          <img class="bgtu" src="../../assets/img/personal/touxiang.png" alt="">
        </a>
        <a >
          <span class="bgwen" @click="doLogin">登录</span>
          <span class="bgzhu" @click="doLogin">注册</span>
          <div class="zhang">账户提现</div>
        </a>

      </div>
    </div>
    <!--我的订单order-left-->
    <div class="order">
      <ul>
        <li class="order-left">我的订单</li>
        <li><a class="order-right">查看更多 ></a></li>
      </ul>
    </div>
    <hr>
    <!--待支付行-->
    <div class="pay">
      <ul>
        <li>
          <a href="">
            <img src="../../assets/img/personal/daizhifu.png" alt="">
            <p>待支付</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="../../assets/img/personal/daifahuo.png" alt="">
            <p>待发货</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="../../assets/img/personal/daishouhuo.png" alt="">
            <p>待收货</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="../../assets/img/personal/jiaoyiwancheng.png" alt="">
            <p>交易完成</p>
          </a>
        </li>
      </ul>
    </div>
    <!--我的返金排号my-left-->
    <div class="my">
      <ul>
        <li class="my-left">我的返金排号
          <a class="my-right" href="">查看更多></a>
        </li>

      </ul>
    </div>
    <hr>
    <!--查看更多下拉-->
    <div class="more">
      <ul>
        <li>
          <p>2017/06/26</p>
          <p>消费: ￥ 100</p>
          <p>排号: 10</p>

        </li>
      </ul>
    </div>
    <hr>
    <!--我的神灯值-->
    <!---->
    <div class="my-total">
      <ul >
        <li class="my-top">0</li>
        <li class="my-bottom">我的神灯值</li>
      </ul>
    </div>
    <!---->
    <div class="my-total">
      <ul>
        <li class="my-top">0</li>
        <li class="my-bottom">我的足迹</li>
      </ul>
    </div>
    <!---->
    <div class="my-total">
      <ul>
        <li class="my-top">0</li>
        <li class="my-bottom">我的优惠券</li>
      </ul>
    </div>
    <!---->
    <div class="my-total">
      <ul>
        <li class="my-top">0</li>
        <li class="my-bottom">我的心得</li>
      </ul>
    </div>
    <hr>
    <!--我的商城-->
    <div class="my-shop">
      <ul >
        <li>
          <a href="">
            <img src="../../assets/img/personal/wodeshangcheng.png" alt="">
            <p>我的商城</p>
          </a>
        </li>

      </ul>
    </div>
    <!--实名认证-->
    <ul class="my-shop">
      <li>
        <a href="">
          <img src="../../assets/img/personal/shimingrenzhneg.png" alt="">
          <p>实名认证</p>
        </a>
      </li>

    </ul>
    <!--收货地址-->
    <ul class="my-shop">
      <li>
        <a href="">
          <img src="../../assets/img/personal/shouhuodizhi.png" alt="">
          <p>收货地址</p>
        </a>
      </li>

    </ul>
    <!--关注公众号-->
    <ul class="my-shop">
      <li >
        <a href="">
          <img src="../../assets/img/personal/guanzhugongzhonghao.png" alt="">
          <p>关注公众号</p>
        </a>
      </li>

    </ul>
    <!--客服与反馈-->
    <!--<ul class="my-shop">-->
      <!--<li>-->
        <!--<a href="">-->
          <!--<img src="../../assets/img/personal/kehufankui.png" alt="">-->
          <!--<p>客服与反馈</p>-->
        <!--</a>-->
      <!--</li>-->

    <!--</ul>-->
  <!--弹窗部分-->
    <div class="window" v-show="isOpen">
      <p class="x">x</p>
      <div class="login">
      <p @click="doClick">登录</p>
      <p>注册</p>
      </div>
    </div>

  </div>
</template>
<script>
  export default {
//    $(function() {
//      $(".bgwen").click(function () {
//        $(".window").fadeIn();
//      })
//    },
    data(){
      return{
        isOpen: false,
      }
    },
    methods: {
      doClick(){
        this.$router.push('/jiayemian/yemian');
      },
      doLogin(){
        this.isOpen =! this.isOpen;
      }
    }

  }
</script>
<style scoped>

  .wrapper{
    width: 100%;
    /*height:30rem;*/
  }
  .Bg{

    width: 100%;
    position: relative;
  }
  .bg{
    height:6rem;
    background: red url(../../assets/img/personal/shangcengdatu.png) no-repeat;
    background-size: 100% 100%;
  }
  .bgtu{
    width: 2.3rem;
    height:2.3rem;
    position: absolute;
    left:2%;
    top:19%;

  }
  .bgwen{
    color: white;
    font-size: 0.8rem;
    font-weight:100;
    position: absolute;
    left:17%;
    top:29%;
  }
  .bgzhu{
    color: white;
    font-size: 0.8rem;
    font-weight:100;
    position: absolute;
    left:29%;
    top:29%;
  }
  .zhang{
    color: white;
    font-size: 0.7rem;
    font-weight:100;
    position: absolute;
    left:75%;
    top:70%;
    background-color: #000000;
    border-radius:2rem;
    opacity: 0.7;
  }
  /*<!--我的订单-->*/
  .order{
    height:2rem;
    overflow: hidden;
  }
  .order ul {
    position: relative;
  }
  .order-left{
    font-size: 0.9rem;
    font-weight: 300;
    position: absolute;
    left: 3%;
    top:1%;
  }
  .order-right{
    font-size: 0.7rem;
    font-weight: 200;
    float: right;
    position: absolute;
    left: 76%;
    top:10%;
  }
  .pay{
    height:2.3rem;
  }
  .pay ul{
    margin-left: 0.09rem;

  }
  .pay ul li{
    display:inline-block;
    font-size: 0.6rem;
    text-align: center;
    margin-left: 1.5rem;
  }
  .pay a{
    color: #4d4d4d;
    line-height: 0.95rem;
    letter-spacing: 0.03rem;
  }
  .pay a img {
    width:1.1rem;
  }
  /*<!--我的返金排号-->*/
  .my{
    height:2.4rem;
    /*overflow: hidden;*/
  }
  .my-left{
    font-size: 0.8rem;
    padding-top: 1rem;
  }
  .my-right{
    font-size:0.7rem;
    float: right;
    padding-top: 0.1rem;
    color: #4d4d4d;
  }

  .more ul li p{
    display: inline-block;
    font-size:0.7rem;
    padding-left: 1rem;
  }
  /*!*我的神灯值*! "my-total"my-top my-bottom"*/
  .my-total{
    display: inline-block;
    font-size: 0.6rem;
    text-align: center;
    margin-left: 0.9rem;
  }
  /*我的商城*/
  .my-shop {
    display: inline-block;
    font-size: 0.6rem;
    text-align: center;
    margin-left: 0.9rem;
    margin-top: 0.5rem;
  }
  .my-shop li a {
    color: #4d4d4d;
  }
  .my-shop li a img{
    width:1rem;
  }
  /*弹窗部分*/
  .window{
    margin: 0 auto;
    /*text-align: center;*/
    overflow: hidden;
    width: 100%;
    height: 6rem;
    background: lightyellow;

  }
  .x{
    float: right;
   /*margin-left: 12rem;*/
    font-weight: 100;
  }
  .login p:nth-child(1){
    margin-top: 2rem;
    font-size:0.7rem;
    width: 10rem;
    height: 0.9rem;
    background: #e53e42;
    text-align: center;
    border-radius: 2rem;
    color: whitesmoke;
    margin-left: 4rem;
    font-weight: 100;

  }
  .login p:nth-child(2){
    font-size:0.7rem;
    width: 10rem;
    height: 0.9rem;
    text-align: center;
    border-radius: 2rem;
    color: whitesmoke;
    margin-left: 4rem;
    border:1px solid gray;
    color: black;
    font-weight: 100;
    margin-top: 0.3rem;
  }

  .wrapper1{
    width: 100%;
    height:33rem;
  }
  .Bg{
    width: 100%;
    position: relative;
  }
  .bg{
    height:6rem;
    background: red url(../../assets/img/personal/shangcengdatu.png) no-repeat;
    background-size: 100% 100%;
  }
  .bgtu{
    width: 2.3rem;
    height:2.3rem;
    position: absolute;
    left:2%;
    top:19%;

  }
  .bgwen{
    color: white;
    font-size: 0.8rem;
    font-weight:100;
    position: absolute;
    left:17%;
    top:29%;
  }
  .zhang{
    width: 3.5rem;
    height: 1rem;
    color: white;
    font-size: 0.7rem;
    font-weight:100;
    position: absolute;
    left:75%;
    top:70%;
    background-color: #000000;
    border-radius:1.6rem;
    text-align: center;
    opacity: 0.7;
  }
  /*<!--我的订单-->*/
  .order{
    height:2rem;
    overflow: hidden;
  }
  .order ul {
    position: relative;
  }
  .order-left{
    font-size: 0.6rem;
    font-weight: 300;
    margin-top: 0.6rem;
    position: absolute;
    left: 3%;
    top:1%;
  }
  .order-right{
    font-size: 0.6rem;
    font-weight: 200;
    margin-top: 0.6rem;
    float: right;
    position: absolute;
    left: 70%;
    top:10%;
  }
  .pay{
    height:2.3rem;
  }
  .pay ul{
    margin-left: 0.09rem;
    margin-top: 0.5rem;
  }
  .pay ul li{
    display:inline-block;
    font-size: 0.5rem;
    text-align: center;
    margin-left: 1.5rem;
  }
  .pay a{
    color: #4d4d4d;
    line-height: 0.95rem;
    letter-spacing: 0.03rem;
  }
  .pay a img {
    width:1.1rem;
  }
  /*<!--我的返金排号-->*/
  .my{
    height:2.4rem;
    /*overflow: hidden;*/
  }
  .my-left{
    font-size: 0.6rem;
    padding-top: 1rem;
    margin-left: 0.4rem;
    color: #4d4d4d;
  }
  .my-right{
    font-size:0.6rem;
    float: right;
    padding-top: 0.1rem;
    color: #4d4d4d;
  }
  .more ul li{
    border-bottom: 1px solid #4d4d4d;
  }

  .more ul li p{
    display: inline-block;
    font-size:0.56rem;
    padding-left: 1.3rem;
    color: #4d4d4d;

  }
  /*!*我的神灯值*! "my-total"my-top my-bottom"*/
  .my-bottom{
    font-size:0.5rem;
    color: #4d4d4d;
  }
  .my-top{
    color: #e53e42;
  }
  .my-total{
    display: inline-block;
    font-size: 0.6rem;
    text-align: center;
    margin-left: 1.2rem;
  }
  /*我的商城*/
  .my-shop {
    display: inline-block;
    font-size: 0.5rem;
    text-align: center;
    margin-left: 1.36rem;
    margin-top: 0.5rem;
  }
  .my-shop li a {
    color: #4d4d4d;
  }
  .city{
    font-size:0.5rem;
  }

  .my-shop li a img{
    width:1rem;
  }


</style>
